<template>
  <div class="head">
    <div class="body">
      <div class="flex">
        <div class="logo flex_li">
          <img class="flex_logo" :src="logoImg" @click="goIndex" alt="">
        </div>
        <nav  class="flex_li" >
          <ul class="menu_ul">
            <li class="flex_menu" @click="goIndex()">首页</li>
            <li class="flex_menu" @click="goList(item.id,item.name)" v-for="(item,i) in menuUl" :key="i" >{{item.name}}</li>
          </ul>
        </nav>
      </div>
      <div>
        <a-input-search
          class="input-search"
          v-model="search"
          placeholder="请输入想要搜索的内容"
          enter-button="搜索"
          @search="onSearch"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getCategory} from "@/api/blog";
export default {
  name: "gamePlayer",
  data() {
    return {
      menuUl:[
        {name:'排行榜',id:1},
      ],
      logoImg:require('@/assets/img/logo.png'),
      search:'',
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      getCategory().then(
        (res) => {
          let data = res.result;
          this.menuUl = data.map((obj) => {
            obj = {
              name:obj.name,
              id:obj.id,
            }
            return obj;
          })
        },
        (err) => {
          this.$message.warning("提交失败");
        }
      );
    },
    goIndex(){
      this.$router.push({ path: '/index', params: {}})
    },
    goList(id,name){
      this.$router.push({ path: '/articleList?id='+id+'&name='+name})
    },
    onSearch(){
      // window.open('https://www.baidu.com/s?wd='+this.search);
      if(this.search == ''){
        this.$message.warning("请输入搜索内容");
      }else{
        this.$router.push({ path: '/articleList?keywords='+this.search})
      }
    }
  },
};
</script>

<style scoped>
.head {
  height: 67px;
  background: white;
}
.logo{
  display:inline-block;
}
.flex_logo{
  width: 190px;
  margin-top:10px ;
  float: left;
}
.menu_ul{
  padding: 0px 30px;
}
.flex_li{
  line-height: 67px;
  float: left;
}
.flex_menu{
  margin-right: 10px;
  color: #333;
  font-size: 16px;
  cursor:pointer;
}
.flex_menu:hover{
  color: #0082ff;
}
.input-search{
  width: 250px;
  float: right;
  margin: 16px;
}
</style>
